<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highsecondary" content="no">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

  <title>询价列表 -报价模版</title>
  <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
  <link href="../lib/css/animate.min.css" rel="stylesheet">
  <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="../style/temp-mould.css">
  <style>
    [v-cloak] { display: none }
    div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
  </style>
</head>
<body>
<div id="q-rfxVendorProductionQuotationView" v-cloak>
  <q-card class="bg-white full-width no-shadow">
    <q-card-main>
      <q-tabs
        align="left"
        v-model="mainTab"
        :two-lines="false"
        inverted
        color="primary">
        <q-tab slot="title" name="mainInfo" label="零件信息" ></q-tab>
        <q-tab-pane name="mainInfo" class="q-pa-none">
          <div class="row justify-end">
            <q-btn
              push
              color="primary"
              @click="back()"
              label="返回"
              class="q-mt-sm q-mr-sm"></q-btn>
          </div>
          <div class="row justify-between position-relative">
            <div style="width: 85%" >
              <p class="q-ml-md row gutter-x-sm">
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  零件编码：
                  <span class="text-light">{{baseInfoForm.matCode}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  零件名称：
                    <span class="text-light">{{baseInfoForm.matName}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  单位：
                    <span class="text-light">{{baseInfoForm.unitName}}</span>
                </span>
              </p>
              <p class="q-ml-md row gutter-x-sm">
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  币种：
                  <span class="text-light">{{baseInfoForm.currencyName}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  需求数量：
                  <span class="text-light">{{baseInfoForm.quantity}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  模具摊销：
                  <span class="text-light">
                    <q-chip v-if="baseInfoForm.isMoldCostShare == 1" dense square color="positive">是</q-chip>
                    <q-chip v-if="baseInfoForm.isMoldCostShare == 0" dense square color="light">否</q-chip>
                  </span>
                </span>
              </p>
              <p class="q-ml-md row gutter-x-sm">
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  报价模版：
                  <span class="text-light">{{baseInfoForm.quoteTempName}}</span>
                </span>
              </p>
            </div>
          </div>
        </q-tab-pane>
      </q-tabs>
    </q-card-main>
    <q-card-main>
      <q-tabs
        align="left"
        v-model="mainTab"
        :two-lines="false"
        inverted
        color="primary">
        <q-tab slot="title" name="mainInfo" label="模具摊销" ></q-tab>
        <q-tab-pane name="mainInfo" class="q-pa-none">
          <div class="row justify-between position-relative">
            <div style="width: 85%" >
              <p class="q-ml-md row gutter-x-sm">
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  模具摊销类型：
                  <span class="text-light" v-if="baseInfoForm.shareType==1">一次性成本摊销</span>
                  <span class="text-light" v-if="baseInfoForm.shareType==2">基于时间摊销</span>
                  <span class="text-light" v-if="baseInfoForm.shareType==3">基于数量摊销 </span>
                </span>
                <span v-if="baseInfoForm.shareType==2||baseInfoForm.shareType==3" class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  摊销数量：
                  <span class="text-light">{{baseInfoForm.shareQuantity}}</span>
                </span>
                <span v-if="baseInfoForm.shareType==2||baseInfoForm.shareType==3" class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  单位：
                  <span class="text-light">{{baseInfoForm.shareUnitName}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  付款条件：
                  <span class="text-light">{{baseInfoForm.sharePaymentName}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  交付日期：
                  <span class="text-light">{{baseInfoForm.sharePaymentTime}}</span>
                </span>
                <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                  模具摊销费用:
                  <span class="text-light">{{quoteForm.mouldSharePrice}}</span>
                </span>
              </p>
            </div>
          </div>
        </q-tab-pane>
      </q-tabs>
    </q-card-main>
    <q-card-main>
      <temp-mould v-if="baseInfoForm.quoteTempCode == 'MOULD'&&tempData" :readonly="true" :data="tempData"></temp-mould>
      <!-- <temp-mould v-if="baseInfoForm.quoteTempCode == 'MOULD'"></temp-mould> -->
      <temp-production v-if="baseInfoForm.quoteTempCode == 'FACTORY'&&tempData" :readonly="true" :data="tempData"></temp-production>
    </q-card-main>
  </q-card>
</div>

<!-- ie-polyfill 、 vue.js and quasar-framework -->
<script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
<script src="../lib/js/vue.js"></script>
<script src="../lib/js/quasar.mat.umd.min.js"></script>
<!-- babel for es6 transform -->
<!-- <script src="lib/js/babel.min.js"></script> -->
<!-- vue validate -->
<script src="../lib/js/vuelidate.min.js"></script>
<script src="../lib/js/validators.min.js"></script>
<!-- consts and utils ps: always leave this file first -->
<script src="../script/consts.js"></script>
<script src="../script/utils.js"></script>
<!-- status code -->
<script src="../script/status.code.js"></script>
<!-- qs for axios -->
<script src="../lib/js/qs.min.js"></script>
<!-- axios for http request -->
<script src="../lib/js/axios.js"></script>
<!-- axios.instance must be after axios -->
<script src="../script/axios.instance2.js"></script>
<!-- quasar i18n zh-hans -->
<script src="../lib/lang/zh-hans.js"></script>
<!-- vue-i18n for application's internationalization -->
<script src="../lib/js/vue-i18n.js"></script>
<!-- current page international file -->
<script src="../lang/sor/rfxPurAdd.js"></script>
<!-- components -->
<script src="../components/h-form-table.js"></script>
<!-- templates -->
<script src="../templates/temp-production.js"></script>
<script src="../templates/temp-mould.js"></script>

<script>
  // quasar components use
  Vue.use(window.vuelidate.default)
  var minLength = window.validators.minLength
  var required = window.validators.required
  Quasar.i18n.set(Quasar.i18n[LANGUGE])
  new Vue({
    el: '#q-rfxVendorProductionQuotationView',
    i18n: i18n,
    data: function() {
      return {
        mainTab: 'mainInfo',
        // 通用
        selectedTab: 'tab-1',
        baseInfoForm: {
          matCode:'',
          matName:'',
          unitName:'',
          currencyName:'',
          quantity:'',
          quoteTempName:'',
          quoteTempCode:'',
          shareType:'',
          shareQuantity:'',
          shareUnitName:'',
          sharePaymentName:'',
          sharePaymentTime:'',
          isMoldCostShare:'',
        },
        quoteForm:{
          // dailyProduction:'',
          // yearProduction:'',
          // rawMatPrice:'',
          // outsourceMatPrice:'',
          // processPrice:'',
          // erectionPrice:'',
          mouldSharePrice:'',
        },
        //模板数据
        tempData: null,
        // 通用
        addOrEdit: 1, // 1 新增 2 编辑
        disable: true,
        // 返回
        backUrl: '',
      }
    },
    validations: {
      
    },
    computed: {
    },
    watch: {

    },
    created: function() {
      this.signUp();
      this.getExpense()
      var args = GetRequest()
      this.backUrl = args.backUrl
    },
    methods: {
      back:function () {
          //history.go(-1);
        var args = GetRequest();
        if (this.backUrl) {
          window.location.href = this.backUrl + '.html?id='+args.headerId
          return 
        }
        if(args.type==0){
           window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
        }else if(args.type==1){
           window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-3'
       }else if(args.type==2){
           window.location.href = 'rfxVendorEnquiryPriceView.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
        }
      },
      signUp:function () {
        var args = GetRequest();
        var that = this
        axios({
          method: 'post',
          url: '/manager/rfq/item/getRfqItem/'+args.rfqItemId
        })
        .then(function(data) {
          that.baseInfoForm = {
            matCode:data.data.matCode,
            matName:data.data.matName,
            unitName:data.data.unitName,
            currencyName:data.data.currencyName,
            quantity:data.data.quantity,
            quoteTempName:data.data.quoteTempName,
            quoteTempCode:data.data.quoteTempCode,
            shareType:data.data.shareType,
            shareQuantity:data.data.shareQuantity,
            shareUnitName:data.data.shareUnitName,
            sharePaymentName:data.data.sharePaymentName,
            sharePaymentTime:data.data.sharePaymentTime,
            isMoldCostShare:data.data.isMoldCostShare,

          }
        })
        .catch(function(err) {
          console.log(err)
        })
      }, 
      getExpense:function () {
        var args = GetRequest();
        var that = this
        axios({
          method: 'post',
          url: '/manager/rfqvendor/quote/getRfqQuote/'+args.quoteId
        })
        .then(function(data) {
          that.quoteForm = {
            // dailyProduction:data.data.dailyProduction,
            // yearProduction:data.data.yearProduction,
            // rawMatPrice:data.data.rawMatPrice,
            // outsourceMatPrice:data.data.outsourceMatPrice,
            // processPrice:data.data.processPrice,
            // erectionPrice:data.data.erectionPrice,
            mouldSharePrice: data.data.mouldSharePrice,
          }
          var _arr = [], a = JSON.parse(data.data.tabsJsonStr)
          a.map(function(item) {
            _arr.push(JSON.parse(item))
          })
          that.tempData = _arr
        })
        .catch(function(err) {
            console.log(err)
        })
      }
    }
  })
</script>
</body>
</html>